<template>
  <div class="box">
    <navBar :navBar="navBar"></navBar>
    <div class="bannerBox">
      <p>{{ $t("在线客服") }}</p>
    </div>
	<div class="content" v-show="info.sitename">
	  <div class="itemBox" @click="onlineserver">
	    <p>{{ $t("在线客服") }}</p>
	  </div>
	</div>
    <div class="content" v-show="info.whatsapp1">
      <div class="itemBox" @click="goService">
        <p>Whatsapp service</p>
      </div>
    </div>
	<div class="content" v-show="info.line">
	  <div class="itemBox" @click="goService2">
	    <p>Line service</p>
	  </div>
	</div>
	<div class="content" v-show="info.tg">
	  <div class="itemBox" @click="goService3">
	    <p>Telegram service</p>
	  </div>
	</div>
	<van-popup v-model="show"  position="bottom" :style="{ height: '80%' }">
		<div class="act-form" style="overflow:hidden;border:0px">
	      <iframe :src="src" ref="iframe" style="width: 11.6rem;height: 20rem"></iframe>
	  	</div>
	</van-popup>
		
  </div>
</template>
<script>
import navBar from "@/components/navBar.vue";
export default {
  name: "onlineService",
  components: { navBar },
  data() {
    return {
      account: "",
      password: "",
	  info:[],
	  show:false,
      navBar: {
        back: true,
        title: this.$t("在线客服"),
        close: false,
        btn: "",
      },
	  src:""
    };
  },
  mounted() {
	  this.getService();
  },
  methods: {
	
	getService(){
		$postAxios(api.getService, {}, (res) => {
			
			console.log(res,"res")
			
		  this.info = res.data;
				
		});
	},
	  onlineserver(){
		 this.src = this.info.sitename;
		 this.show = true;
	  },
    // 在线客服
    goService() {
      this.lianxi(this.info.whatsapp1);
    },
	goService2(){
		window.location.href = "https://line.me/ti/p" + this.info.line;
	},
	goService3(){
		window.location.href = "https://t.me/" + this.info.line;
	},
    lianxi(tel) {
      if (window.navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) {
        window.location.href = "https://wa.me/" + tel;
        setTimeout(function () {
          window.location.href =
            "https://itunes.apple.com/us/app/whatsapp-messenger/id310633997?mt=8";
          window.location.href =
            "https://itunes.apple.com/us/app/whatsapp-messenger/id310633997?mt=8";
        }, 2000);
      } else if (window.navigator.userAgent.match(/android/i)) {
        window.location.href = "https://wa.me/" + tel;
        setTimeout(function () {
          window.location.href =
            "https://play.google.com/store/apps/details?id=com.whatsapp";
        }, 2000);
      }
    },
  },
};
</script>
<style scoped lang="scss">
.box {
  position: absolute;
  left: 0px;
  top: 0;
  right: 0px;
  bottom: 0px;
  z-index: 1;
  background-color: #f7f6fb;
  .bannerBox {
    padding: 67px 29px 27px;
    width: 100%;
    height: 150px;
    box-sizing: border-box;
    background: url("../../assets/images/bg01.png") no-repeat center top;
    background-size: cover;
    p {
      color: #fff;
      font-size: 19px;
      font-weight: 700;
    }
  }
  .content {
    padding: 10px;
    .itemBox {
      padding: 20px 18px;
      width: 100%;
      height: 58px;
      box-sizing: border-box;
      background: url("../../assets/images/bg02.png") no-repeat center top;
      background-size: 100% auto;
      p {
        color: #3664fd;
        font-size: 14px;
        font-weight: 700;
      }
    }
  }
}
</style>